<template>
    <div style="display: flex;justify-content: center;padding-top:10%;height: 100vh">
        <div style="width: 60%">
            <h1>模型选择:</h1>
            <div style="display: flex;align-content:center;margin-bottom: 10px;border: 0px  solid  red">
                <div style="display: flex;align-items:center;margin-right: 10px;border: 0px  solid  red">
                    <span style="flex: 0 0 auto ;margin-right: 10px">代码:</span>
                    <el-input v-model="code"></el-input>
                </div>
                <div style="display: flex;align-items:center;border: 0px  solid  red">
                    <span style="flex: 0 0 auto;margin-right: 10px">时间:</span>
                    <el-date-picker
                            v-model="selectDate"
                            type="daterange"
                            range-separator="To"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="YYYY-MM-DD"
                    />
                </div>
            </div>
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="name" label="项目名称"/>
                <el-table-column prop="message" label="状态"/>
                <el-table-column prop="action" label="操作" width="300">
                    <template #default="scope">
                        <div style="display: flex;align-items: center">
                            <el-button type="primary" @click="viewData(scope.row)">查看数据</el-button>
                            <el-button type="primary" @click="train(scope.row)">模型训练</el-button>
                            <el-button type="success" @click="draw(scope.row)">展示图表</el-button>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
            <div>
                <h1>数据集:{{ AllData.length || 0 }}条</h1>
                <el-table :data="AllData" stripe style="width: 100%;height: 350px">
                    <el-table-column prop="date" label="date"/>
                    <el-table-column prop="open" label="open"/>
                    <el-table-column prop="close" label="close"/>
                    <el-table-column prop="high" label="high"/>
                    <el-table-column prop="low" label="low"/>
                    <el-table-column prop="volume" label="volume"/>
                </el-table>
            </div>
        </div>

    </div>
</template>

<script lang="ts" setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import {ElMessage, ElMessageBox, ElNotification} from 'element-plus'
import {useRouter} from "vue-router";


// const {appContext: {config: {globalProperties: {ws}}}} = getCurrentInstance();
const router = useRouter()

const code = ref(600000)
const selectDate = ref(['2014-01-01', '2023-01-01'])
const htmlData = ref("")
const tableData = ref([
    {
        name: 'cnn模型预测',
        message: "",
        type: 'cnn'
    },
    {
        name: 'lstm模型预测',
        message: "",
        type: 'lstm'
    }
])

const AllData = ref([])
let  cb=()=>{
    window.ws.addEventListener('message', (event) => {
        let data = JSON.parse(event.data)
        console.log('index收到消息：', data);
        if (data.command == 'cnn-view-data' && data[`result-type`] == 'data') {
            AllData.value = data.data
        }
        if (data.command == 'lstm-view-data' && data[`result-type`] == 'data') {
            AllData.value = data.data
        }
        if (data.command == 'cnn-train' && data[`result-type`] == 'message') {
            tableData.value[0].message = data.message
        }
        if (data.command == 'lstm-train' && data[`result-type`] == 'message') {
            tableData.value[1].message = data.message
        }
        // 展示训练结果
        if (data.command == 'cnn-draw' && data[`result-type`] == 'data') {
            ElMessageBox.confirm(
                '图表已经生成是否查看结果?',
                '提示',
                {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    type: 'success',
                }
            )
                .then(() => {
                    localStorage.setItem("cnn-draw", JSON.stringify(data))
                    router.push({
                        path: "/chart", query: {
                            type: 'cnn-draw'
                        },
                    })
                })
                .catch(() => {

                })
        }

        if (data.command == 'lstm-draw' && data[`result-type`] == 'data') {
            ElMessageBox.confirm(
                '图表已经生成是否查看结果?',
                '提示',
                {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    type: 'success',
                }
            )
                .then(() => {
                    localStorage.setItem("lstm-draw", JSON.stringify(data))
                    router.push({
                        path: "/chart", query: {
                            type: 'lstm-draw'
                        },
                    })
                })
                .catch(() => {

                })
        }

    })
}


// 查看数据
const viewData = (row) => {
    cb()
    console.log('>>>>>>>>ws', ws)
    console.log('>>>>>>>>window.ws', window.ws)
    if (code.value == "" || selectDate.value == "" || selectDate.value.length == 0) {
        ElNotification({
            title: '提示',
            message: '请填写股票代码以及开始结束日期',
            type: 'warning',
        })
        return
    }
    if (row.type == 'cnn') {
        window.ws.send(JSON.stringify({
            "command": "cnn-view-data", "code": code.value,
            "startTime": selectDate.value[0],
            "endTime": selectDate.value[1]
        }))
    }
    if (row.type == 'lstm') {
        window.ws.send(JSON.stringify({
            "command": "lstm-view-data", "code": code.value,
            "startTime": selectDate.value[0],
            "endTime": selectDate.value[1]
        }))
    }
}

// 训练模型
const train = (row) => {
    cb()
    if (code.value == "" || selectDate.value == "" || selectDate.value.length == 0) {
        ElNotification({
            title: '提示',
            message: '请填写股票代码以及开始结束日期',
            type: 'warning',
        })
        return
    }
    if (row.type == 'cnn') {
        window.ws.send(JSON.stringify({
            "command": "cnn-train",
            "code": code.value,
            "startTime": selectDate.value[0],
            "endTime": selectDate.value[1]
        }))
    }
    if (row.type == 'lstm') {
        window.ws.send(JSON.stringify({
            "command": "lstm-train",
            "code": code.value,
            "startTime": selectDate.value[0],
            "endTime": selectDate.value[1]
        }))
    }
}
// 查看图表数据
const draw = (row) => {
    cb()
    if (code.value == "" || selectDate.value == "" || selectDate.value.length == 0) {
        ElNotification({
            title: '提示',
            message: '请填写股票代码以及开始结束日期',
            type: 'warning',
        })
        return
    }
    if (row.type == 'cnn') {
        window.ws.send(JSON.stringify({"command": "cnn-draw"}))
    }
    if (row.type == 'lstm') {
        window.ws.send(JSON.stringify({"command": "lstm-draw"}))
    }
}
</script>

<style scoped>

</style>
